<template>
    <Card>
        <div class="search_view clearfix">
            <router-link :to="'/district/add-district'" class="save_btn">
                <i-button type="primary" class="save_btn">
                    <Icon type="plus-round"></Icon>
                    添加区域
                </i-button>
            </router-link>
            <div class="search_box">
                <Input placeholder="区域名称" class="wid300" v-model="district_name"/>
                <Input placeholder="手机号码" class="wid300" v-model="district_phone"/>
                <Button type="primary" class="ser_btn" @click="getData">搜索</Button>
            </div>
        </div>
        <Table border :columns="district_head" :data="district_body"></Table>
        <div style="margin: 12px;overflow: hidden">
            <div style="float: right; height:35px;">
                <Page :total="total_count" :current="1" @on-change="page_change"
                      @on-page-size-change="page_size_change" show-sizer show-elevator></Page>
            </div>
        </div>

    </Card>
</template>

<script>
    export default {
        data () {
            return {
                page: 1,
                pre_page: 10,
                total_count: 2,
                district_name: '',
                district_phone: '',
                district_head: [
                    {
                        title: '区域名称',
                        key: 'dis_name',
                        align: 'center'
                    },
                    {
                        title: '区域地址',
                        key: 'dis_site',
                        align: 'center'
                    },
                    {
                        title: '负责人',
                        key: 'dis_principal',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('p', {
                                    style: {
                                        paddingTop: '20px',
                                    }
                                }, '姓名：' + '李云龙'),
                                h('p', {
                                    style: {
                                        paddingBottom: '20px'
                                    }
                                }, '手机号：' + '15877661269')
                            ]);
                        }
                    },
                    {
                        title: '状态',
                        key: 'dis_status',
                        align: 'center'
                    },
                    {
                        title: '操作',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.$router.push({
                                                path: '/district/edit-district/' + params.row.id
                                            });
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small'
                                    },
                                    style: {
                                        marginLeft: '10px'
                                    },
                                    on: {
                                        click: () => {
                                            this.$router.push({
                                                path: '/district/check-district/' + params.row.id
                                            });
                                        }
                                    }
                                }, '详情')
                            ]);
                        }
                    }
                ],
                district_body: [
                    {
                        dis_name: '菏泽牡丹代理',
                        dis_site: '菏泽牡丹区',
                        dis_status: '未启用',
                    },
                    {
                        dis_name: '菏泽牡丹代理2',
                        dis_site: '菏泽牡丹区',
                        dis_status: '启用',
                    }

                ],
            };
        },
        created(){
            this.getData();
        },
        methods: {
            /**----分页----*/
            page_change (val) {
                this.page = val;
                this.getData();
            },
            /**---分页条数----*/
            page_size_change (val) {
                this.pre_page = val;
                this.getData();
            },

            getData () {

            }
        }
    };
</script>
